import style from '@/pages/CarList/components/CarItemSmall/index.module.scss'
// 小桃心
import img8 from '@/assets/images/greyHeart.png'
import img9 from '@/assets/images/redHeart.png'
//引入类型依赖
import { carDataType } from '@/types/data'
import { useRef, useState } from 'react'
type props = {
  carDataType: carDataType
  changeGoParticulars: (bool: boolean) => void
  goSetPitOn: (data: carDataType) => void
  wraperAnimate: (left: number, top: number, height: number, img_src: string, id: number, bool: boolean) => void
  changeCollectionRecords: (id: number, bool: boolean) => void
}
const CarItemSmall = ({ carDataType, changeGoParticulars, goSetPitOn, wraperAnimate, changeCollectionRecords }: props) => {
  const { ID, img_src, vehicle_system, car_price, down_payments, buy_time, kilometre, tit_con } = carDataType
  //控制点赞，false为取消赞，true为点赞
  const [collect, setCollect] = useState(false)
  const carItemRef = useRef<HTMLDivElement | null>(null)
  return (
    <div
      ref={carItemRef}
      className={style.root}
      onClick={(e) => {
        changeGoParticulars(true)
        goSetPitOn(carDataType)
      }}
    >
      <div className='leftImgBox'>
        <img src={`http://www.ibugthree.com/${img_src}`} alt='' className='leftImg' />
      </div>
      <div className='rightBox'>
        {/* 标题 */}
        <div className='itemTitle'>{vehicle_system}</div>
        {/* 参数 */}
        <div className='itemParameter'>{tit_con}</div>
        {/* 描述项 */}
        <div className='describe'>
          <div className='describe-item'>{buy_time}年上牌</div>
          <div className='describe-item'>{kilometre}公里</div>
        </div>
        {/* 价格展示区 */}
        <div className='price'>
          <div className='price-sub'>{6}</div>
          <div className='price-unit'>万</div>
          <div className='down-payment'>首付{down_payments}万</div>
          {/* 桃心 */}
          <img
            src={collect ? img9 : img8}
            alt=''
            className='thumb-up-heart'
            onClick={(e) => {
              e.stopPropagation()
              setCollect(!collect)
              const { top, left } = carItemRef.current!.getBoundingClientRect()
              wraperAnimate(top | 0, left | 0, carItemRef.current!.offsetHeight, img_src, ID, !collect)
            }}
          />
        </div>
      </div>
    </div>
  )
}
export default CarItemSmall
